{% extends "base.html" %}

{% block title %}网络配置 - 告警系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="fw-bold text-primary">网络配置</h1>
    <button class="btn btn-success" id="saveNetworkConfig">
        <i class="bi bi-check-circle"></i> 保存配置
    </button>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white fw-bold">网络接口设置</div>
            <div class="card-body">
                <form>
                    <div class="mb-3">
                        <label for="interfaceType" class="form-label">网络接口</label>
                        <select class="form-select" id="interfaceType">
                            <option selected>以太网 (eth0)</option>
                            <option>无线网络 (wlan0)</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="dhcpToggle" checked>
                            <label class="form-check-label" for="dhcpToggle">使用DHCP自动获取IP</label>
                        </div>
                    </div>
                    
                    <div id="manualConfig" style="display: none;">
                        <div class="mb-3">
                            <label for="ipAddress" class="form-label">IP地址</label>
                            <input type="text" class="form-control" id="ipAddress" placeholder="192.168.1.100">
                        </div>
                        <div class="mb-3">
                            <label for="subnetMask" class="form-label">子网掩码</label>
                            <input type="text" class="form-control" id="subnetMask" placeholder="255.255.255.0">
                        </div>
                        <div class="mb-3">
                            <label for="gateway" class="form-label">默认网关</label>
                            <input type="text" class="form-control" id="gateway" placeholder="192.168.1.1">
                        </div>
                        <div class="mb-3">
                            <label for="dnsServer" class="form-label">DNS服务器</label>
                            <input type="text" class="form-control" id="dnsServer" placeholder="8.8.8.8">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white fw-bold">网络状态</div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                    <div class="fw-medium">接口状态:</div>
                    <div><span class="badge bg-success">已连接</span></div>
                </div>
                
                <div class="d-flex justify-content-between mb-3">
                    <div class="fw-medium">IP地址:</div>
                    <div>192.168.1.100</div>
                </div>
                
                <div class="d-flex justify-content-between mb-3">
                    <div class="fw-medium">子网掩码:</div>
                    <div>255.255.255.0</div>
                </div>
                
                <div class="d-flex justify-content-between mb-3">
                    <div class="fw-medium">默认网关:</div>
                    <div>192.168.1.1</div>
                </div>
                
                <div class="d-flex justify-content-between mb-3">
                    <div class="fw-medium">DNS服务器:</div>
                    <div>8.8.8.8, 8.8.4.4</div>
                </div>
                
                <div class="d-flex justify-content-between">
                    <div class="fw-medium">网络速度:</div>
                    <div>100 Mbps</div>
                </div>
                
                <hr class="my-4">
                
                <h5 class="mb-3">网络测试</h5>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="输入测试地址" value="www.example.com">
                    <button class="btn btn-outline-primary" type="button">Ping测试</button>
                </div>
                <div class="bg-dark text-white p-2 rounded" style="height: 100px; overflow-y: auto; font-family: monospace;">
                    PING www.example.com (93.184.216.34): 56 data bytes<br>
                    64 bytes from 93.184.216.34: icmp_seq=0 ttl=53 time=25.123 ms<br>
                    64 bytes from 93.184.216.34: icmp_seq=1 ttl=53 time=24.987 ms<br>
                    64 bytes from 93.184.216.34: icmp_seq=2 ttl=53 time=25.456 ms
                </div>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
    // DHCP切换功能
    document.getElementById('dhcpToggle').addEventListener('change', function() {
        const manualConfig = document.getElementById('manualConfig');
        if (this.checked) {
            manualConfig.style.display = 'none';
        } else {
            manualConfig.style.display = 'block';
        }
    });
    
    // 保存配置
    document.getElementById('saveNetworkConfig').addEventListener('click', function() {
        alert('网络配置已保存！');
    });
</script>
{% endblock %}
{% endblock %}